<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/18 0018
  Time: 20:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <script type="text/javascript">

        layui.use('table',function(){

            var table = layui.table;

            table.render({
                elem:"#myTable",//表格的id
                url:"${pageContext.request.contextPath}/guru/selectByPageGuru",//数据接口 请求地址
                page:true,//开启分页
                //发送的额外参数
                where:{"name":"${param.name}"},
                //顶部工具栏
                toolbar:"#mytoolbar",
                //页面初始大小
                limit:2,
                //页面下拉列表框中的内容
                limits:[1,2,3,4,5,10,20,30,50],
                //列
                cols:[[
                    {type:"checkbox"},
                    {title:"编号",field:"guruId"},
                    {title:"上师名称",field:"guruName"},
                    {title:"上师图片",field:"guruImage",templet:"#image"},
                    {title:"法名",field:"guruNickName"},
                    {title:"状态",field:"guruStatus",templet:"#bannerState"},
                    {title:"操作",templet:"#caoZuo"}
                ]]
            });
        });

        //搜索操作
        function doSearch () {

            //获取用户输入的内容
            var value = $("#gname").val();

            //发送请求 并且接收数据
            layui.use('table',function(){

                var table = layui.table;
                //reload方法完成数据的重新加载
                table.reload('myTable',{
                    //发送的额外参数
                    where:{"name":value}
                });
            });


        }

        layui.use(['form','layer','table'],function(){
            var form =  layui.form;
            var layer = layui.layer;
            var table = layui.table;

            form.verify({
                //dName:function(value,item) {//value：输入框里面的值 item：DOM对象


              //  }

            });


            //当点击提交按钮的时候，会进入到这个函数


            table.on('tool(test)',function(obj){

                // var data = obj.data();
                // var  iayEvent = obj.event;
                // var tr = obj.tr;




                // console.log(iayEvent);
                // console.log(tr);
            });


        })






        //让添加的弹出层显示  打开
        function toOpenLayer() {

            layui.use('layer',function(){
               layer.open({
                   title:"添加上师",
                   content:$("#addForm"),
                   type:1,
                   maxmin:true
               })
            });
        }

        function doDeleteQuantity() {
            alert("11111")
            layui.use(['table','layer'],function(){

                var table  = layui.table;
                //获取选中的复选框
                var checkStatu = table.checkStatus("myTable");
                //获取选中行的数据
                var data = checkStatu.data;
                console.log(data);

                if(data.length==0){
                    layer.alert("请选中要删除的内容");
                }else{

                    layer.confirm("确定删除吗？",function(index){

                        var ids =new Array(data.length);

                        for(var i = 0;i<ids.length;i++){
                            ids[i]=data[i].patientId;
                        }


                        console.log(ids);
                        $.ajax({
                            url:"private/deletequantity",
                            data:"ids="+ids,
                            success:function(data){

                                layer.alert(data.isDeleteBatch,{time:2000});
                                table.reload("myTable");

                            }
                        });




                    });


                }

            });
        }

        function deleteDt(id) {
            alert(id);
            layui.use(['table','layer'],function () {

                var table=layui.table;
                $.ajax({
                    url:"${pageContext.request.contextPath}/guru/deleteGuru",
                    data:{"id":id},
                    success:function(data){

                        console.log(data);
                        if(data.isDelete){
                            layer.alert("删除成功",{time:2000});
                            //刷新table
                            table.reload("myTable");
                        }else{
                            layer.alert("删除失败",{time:2000});
                        }

                    }
                });

            })


        }

        function doUpdateLayer(id) {
        alert(id);
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/selectOneGuru",
                data:{"id":id},
                success:function(data){
                    console.log(data);

                    //打开显示  修改的弹出层
                    layer.open({
                        title:"修改上师",
                        content:$("#updateForm"),
                        type:1,
                        maxmin:true
                    });


                    $("#gnname").val(data.guruNickName);
                    $("#name").val(data.guruName);
                    $("#gid").val(data.guruId);
                    $("#guruImage").val(data.guruImage);

                    //渲染
                    layui.form.render();


                }
            });

        }

        var fileStatus=false;


        //JavaScript代码区域
        layui.use(['element','upload','table','layer'], function(){
            var element = layui.element;
            var $ = layui.jquery,upload = layui.upload;
            var table=layui.table;
            var layer=layui.layer;
            //普通图片上传
            var uploadInst = upload.render({
                //绑定选择上传图片的按钮
                elem: '#test2',
                // 文件上传的地址
                url: '${pageContext.request.contextPath}/guru/insertGuru',
                //开启多文件上传 有一个文件队列 （集合）
                multiple:true,
                //最大上传个数
                number:1,
                //携带额外的参数
                data:{
                    // 参数携带格式 key-匿名函数
                    guruName:function () {
                        // 函数返回值 是通过选择器获取到的表单元素的值
                        return $('#guruName').val();
                    },
                    guruNickName:function () {
                        return $("#guruNickName").val();
                    }
                },
                // 不让文件上传组件自动上传
                auto:false,
                // 绑定提交按钮 让按钮决定什么时候提交 添加的时候上传
                bindAction: '#addgSubmit',

                choose: function(obj){
                    //每次选择文件追加到文件队列 把选择的文件放在集合中
                    var  files=this.files=obj.pushFile();
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        alert(result);
                        fileStatus=true;
                        $('#imgdemo2').attr('src', result); //图片链接（base64）
                    });
                },done: function(res,index,upload){
                    //清空表单
                    document.getElementById("addForm").reset();
                    //清空图片 修改file_upload_status为fasle
                    fileStatus=false;
                    $("#imgdemo2").attr("src","");
                    //index被上传的文件在队列中的下标  通过delete方法删除队列中的文件
                    delete this.files[index];
                    // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                    //如果上传失败
                    if(!res.isInsert){
                        return layer.msg('上传失败');
                    }else{
                        //上传成功 关闭弹出层
                        layer.closeAll("page");
                        //刷新table 刷新table
                        table.reload("myTable");

                    }

                }
            });
        });


        //JavaScript代码区域
        layui.use(['element','upload','table','layer'], function(){
            var element = layui.element;
            var $ = layui.jquery,upload = layui.upload;
            var table=layui.table;
            var layer=layui.layer;
            //普通图片上传
            var uploadInst = upload.render({
                //绑定选择上传图片的按钮
                elem: '#test3',
                // 文件上传的地址
                url: '${pageContext.request.contextPath}/guru/updateGuru',
                //携带额外的参数
                data:{
                    // 参数携带格式 key-匿名函数
                    guruName:function () {
                        // 函数返回值 是通过选择器获取到的表单元素的值
                        return $('#name').val();
                    },
                    guruNickName:function () {
                        return $("#gnname").val();
                    },
                    guruImage:function () {
                        return $("#guruImage").val();
                    },
                    guruId:function () {
                        return $("#gid").val();
                    }
                },
                // 不让文件上传组件自动上传
                auto:false,
                // 绑定提交按钮 让按钮决定什么时候提交 添加的时候上传
                bindAction: '#updateForm2',

                choose: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        alert(result);
                        fileStatus=true;
                        $('#imgdemo3').attr('src', result); //图片链接（base64）
                    });
                },done: function(res){
                    // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                    //如果上传失败
                    if(!res.isUpdate){
                        return layer.msg('上传失败');
                    }else{
                        //上传成功 关闭弹出层
                        layer.closeAll("page");
                        //刷新table 刷新table
                        table.reload("myTable");

                    }

                }
            });
        });




        //批量添加


        //JavaScript代码区域
        layui.use(['element','upload','table','layer'], function(){
            var element = layui.element;
            var $ = layui.jquery,upload = layui.upload;
            var table=layui.table;
            var layer=layui.layer;
            //普通图片上传
            var uploadInst = upload.render({
                //绑定选择上传图片的按钮
                elem: '#test4',
                // 文件上传的地址
                url: '${pageContext.request.contextPath}/guru/upload',
                //携带额外的参数
                data:{
                    // // 参数携带格式 key-匿名函数
                    // guruName:function () {
                    //     // 函数返回值 是通过选择器获取到的表单元素的值
                    //     return $('#name').val();
                    // }

                },
                accept:"file",
                // 不让文件上传组件自动上传
                auto:false,
                // 绑定提交按钮 让按钮决定什么时候提交 添加的时候上传
                bindAction: '#uploadForm1',

                choose: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        alert(result);

                        //$('#imgdemo4').attr('src', result); //图片链接（base64）
                    });
                },done: function(res){
                    // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                    //如果上传失败
                    if(!res.isInsert){
                        return layer.msg('上传失败');
                    }else{
                        //上传成功 关闭弹出层
                        layer.closeAll("page");
                        //刷新table 刷新table
                        table.reload("myTable");

                    }

                }
            });
        });

function updateGuru() {

    layui.use(["layer","table"],function () {
        var layer=layui.layer;
        var table =layui.table;

        //没有选择图片发送ajax
        if(!fileStatus){
            var gimg=$("#guruImage").val();
            var name=$("#name").val();
            var id=$("#gid").val();
            var gnname=$("#gnname").val();
            alert("发送ajax ");
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/updateGuru",
                data:{"guruName":name,"guruNickName":gnname,"guruId":id,"guruImage":gimg},
                type:"post",
                success:function (data) {
                    console.log(data);
                    fileStatus=false;
                    //上传成功 关闭弹出层
                    layer.closeAll("page");
                    //刷新table 刷新table
                    table.reload("myTable");


                }
            });
        }


    })

}

function doInsertCount() {

    layui.use('layer',function(){
        layer.open({
            title:"批量添加",
            content:$("#uploadForm"),
            type:1,
            maxmin:true
        })
    });

}


function downloadCount() {



    layui.use(['table','layer'],function(){

        var table  = layui.table;
        //获取选中的复选框
        var checkStatu = table.checkStatus("myTable");
        //获取选中行的数据
        var data = checkStatu.data;
        console.log(data);

        if(data.length==0){
            layer.alert("请选中要下载的内容");
        }else{

            layer.confirm("确定下载吗？",function(index){

                var ids =new Array(data.length);

                for(var i = 0;i<ids.length;i++){
                    ids[i]=data[i].guruId;
                }


                console.log(ids);
                <%--$.ajax({--%>
                    <%--url:"${pageContext.request.contextPath}/guru/downloadGuru",--%>
                    <%--data:"ids="+ids,--%>
                    <%--success:function(data){--%>
                        <%--console.log(data);--%>
                       <%--// layer.alert(data.isDeleteBatch,{time:2000});--%>
                        <%--table.reload("myTable");--%>

                    <%--}--%>
                <%--});--%>
                location="${pageContext.request.contextPath}/guru/downloadGuru?ids="+ids;





            });


        }

    });

}


    </script>
    <script type="text/html" id="image">

        <%--{{#  if(d.patientSex==0){ }}--%>
        <%--女--%>
        <%--{{#  } else { }}--%>
        <%--男--%>
        <%--{{#  } }}--%>
        <img src="${pageContext.request.contextPath}/img/{{d.guruImage}}">
</script>

    <script type="text/html" id="bannerState">

        {{# if (d.guruStatus=== 0) { }}
        正常
        {{# } else { }}
        冻结
        {{# } }}

    </script>

    <script type="text/html" id="caoZuo">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="doUpdateLayer({{d.guruId}})" >修改</button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="deleteDt({{d.guruId}})" >删除</button>
    </script>

    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 50px;
        }

    </style>
   
</head>
<body>

<table id="myTable" lay-data="{id:'myTable'}" >

</table>
dsadsad


<div id="mytoolbar"  style="display: none">
    <button  type="button" class="layui-btn " onclick="toOpenLayer()">

        <i class="layui-icon">&#xe608;</i> 添加
    </button>
    <button type="button" class="layui-btn layui-btn-radius layui-icon-danger" onclick="doDeleteQuantity()">
        <i class="layui-icon layui-icon-delete " ></i> 批量删除
    </button>
    <button type="button" class="layui-btn layui-btn-radius layui-icon-danger" onclick="doInsertCount()">
        <i class="layui-icon layui-icon-delete " ></i> 批量添加
    </button>
    <button type="button" class="layui-btn layui-btn-radius layui-icon-danger" onclick="downloadCount()">
        <i class="layui-icon layui-icon-delete " ></i> 批量下载
    </button>


    <div class="layui-inline">
        <label class="layui-form">名字</label>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text"  placeholder="请输入上师名字" class="layui-input" id="gname">
        </div>
    </div>
    <div class="layui-input-inline" style="width:100px">
        <button type="button" class="layui-btn layui-btn-normal" onclick="doSearch()">
            <i class="layui-icon layui-icon-search"></i> 搜索
        </button>
    </div>
</div>


<form id="addForm" style="display: none" class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label">上师姓名</label>
        <div class="layui-input-block">
            <input  type="text" id="guruName" name="guruName" class="layui-input"  />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test2">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo2">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师法名</label>
        <div class="layui-input-block">
            <input name="guruNickName"  id="guruNickName" class="layui-input" placeholder="请输入上师法名" />
        </div>

    </div>

    <div class="layui-form-item">
        <button lay-submit type="submit" lay-filter="add" id="addgSubmit" class="layui-btn">添加上师</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>


<form id="updateForm" style="display: none" class="layui-form">

    <div class="layui-form-item">
        <label class="layui-form-label">上师姓名</label>
        <div class="layui-input-block">
            <input name="guruName" id="name" class="layui-input" />
            <input name="guruId" id="gid" type="hidden" class="layui-input" />
            <input type="hidden" id="guruImage" name="guruImage">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test3">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo3">
                <p id="demoText2"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师法名</label>
        <div class="layui-input-block">
            <input name="guruNickName"  id="gnname" class="layui-input"  />
        </div>

    </div>


    <div class="layui-form-item">
        <button lay-submit type="button" onclick="updateGuru()" id="updateForm2" lay-filter="update" class="layui-btn">修改上师</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>




<form id="uploadForm" style="display: none" class="layui-form">


    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传文件</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test4">上传文件</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo4">
                <p id="demoText3"></p>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <button lay-submit type="button"  id="uploadForm1" lay-filter="update" class="layui-btn">添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

</body>
</html>
